<template>
  <div class="app-container">
    <div class="main">
      <div class="row-a1">
        <div class="left">
          <div class="search">
            <div class="tit">
              查询原始数据:
            </div>
            <el-input v-model="queryParams.sqlName" @change="selectIpu" placeholder="请输入原始数据名称"></el-input>
          </div>
          <el-scrollbar ref="myScrollbar" :height="300">
            <ul class="list">
              <li v-for="(item, index) in tableData.rows" :key="index" v-show="!item.check">
                <div class="name">
                  {{ item.sqlName }}
                </div>
                <div class="icon" @click="insert(item, index)">
                  <el-icon :size="18">
                    <Plus />
                  </el-icon>
                </div>
              </li>
              <li v-if="tableData.rows.length == 0" class="tip">
                暂无数据~</li>
            </ul>
          </el-scrollbar>
        </div>
        <div class="right">
          <div class="title">
            已选择的原始数据
          </div>
          <el-scrollbar :height="300">
            <ul class="list">
              <li v-for="(item, index) in changeData.rows" :key="index">
                <div class="name">
                  {{ item.sqlName }}
                </div>
                <div class="icons">
                  <div class="icon" @click="cliChange(item, index, 0)">
                    <img src="@/assets/images/icon001.png" alt="">
                  </div>
                  <div class="icon" @click="cliChange(item, index, 1)">
                    <el-icon :size="16">
                      <Delete />
                    </el-icon>
                  </div>
                </div>
              </li>
              <li v-if="changeData.rows.length == 0" class="tip">
                暂未选择数据~</li>
            </ul>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { ref, reactive, computed, onBeforeMount } from "vue"
import { getList } from "@/api/originalData.js"
export default {
  setup() {
    const { proxy } = getCurrentInstance();

    const tableData = reactive({
      rows: [
      ],
      total: 0,
      status: false
    });
    const queryParams = ref({
      currentPage: 1,
      size: 10,
      sqlName: ""
    });
    const myScrollbar = ref({});
    const changeData = reactive({
      rows: [],
      total: 0
    });
    const getLoad = () => {
      proxy.tableData.loading = true;
      proxy.queryParams.currentPage = 1;
      getList(proxy.queryParams).then(res => {
        proxy.tableData.loading = false;
        if (res.status == 'success') {
        } else {
          ElMessage.error('查询失败');
          return;
        }
        proxy.tableData.rows = res.data.records.map(it => {
          it.check = false;
          return it;
        });
        proxy.tableData.total = res.data.total;
        setTimeout(() => {
          checkStatus();
        }, 50);
      })

      setTimeout(() => {
        proxy.myScrollbar.wrapRef
          .onscroll = () => {
            if (proxy.tableData.status) {
              return;
            }
            if (proxy.tableData.rows.length < proxy.tableData.total) {
              proxy.queryParams.currentPage += 1;
              proxy.tableData.status = true;
              getLoad2();
            }
          }
      }, 1000);

    }
    const getLoad2 = () => {
      getList(proxy.queryParams).then(res => {
        proxy.tableData.rows = proxy.tableData.rows.concat(res.data.records.map(it => { it['check'] = false; return it; }));
        proxy.tableData.total = res.data.total;
        proxy.tableData.status = false;
        setTimeout(() => {
          checkStatus();
        }, 50);
      })
    }
    const selList = (row) => {
      return () => {
        return true;
      }
    }
    const insert = (row, ind) => {
      let list1 = proxy.changeData.rows;
      for (const key in list1) {
        if (list1[key].id == row.id) {
          return;
        }
      }
      proxy.tableData.rows[ind].check = true;
      proxy.changeData.rows.push(row);

      if (proxy.tableData.rows.length < proxy.tableData.total) {
        proxy.queryParams.currentPage += 1;
        proxy.tableData.status = true;
        getLoad2();
      }
    }
    const cliChange = (row, ind, type) => {
      switch (type) {
        case 0:
          proxy.changeData.rows.splice(ind, 1);
          proxy.changeData.rows.unshift(row);
          break;
        case 1:
          proxy.changeData.rows.splice(ind, 1);
          checkStatus();
          break;
        default:
          break;
      }

      if (proxy.tableData.rows.length < proxy.tableData.total) {
        proxy.queryParams.currentPage += 1;
        proxy.tableData.status = true;
        getLoad2();
      }
    }
    function checkStatus() {
      let row1 = proxy.tableData.rows;
      let row2 = proxy.changeData.rows;
      for (const key in row1) {
        row1[key]['check'] = false;
      }
      for (const key in row1) {
        for (const key2 in row2) {
          if (row1[key].id == row2[key2].id) {
            row1[key]['check'] = true;
          }
        }
      };
      proxy.tableData.rows = row1;
      proxy.changeData.rows = row2;
    }
    const selectIpu = () => {
      getLoad();
    }
    const cancel = () => {
      proxy.changeData.rows = [];
      proxy.changeData.total = 0;
      proxy.queryParams = {
        currentPage: 1,
        size: 10,
        sqlName: ""
      };
      getLoad();
    }
    onBeforeMount(() => {
      getLoad();
    })
    return {
      tableData, queryParams, myScrollbar, changeData, getLoad, insert, cliChange, selectIpu, cancel,
      selList, checkStatus
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  .row-a1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;

    .left {
      width: 49%;

      .search {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        .tit {
          width: 110px;
          min-width: 110px;
          font-weight: 700;
        }
      }

      .list {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          line-height: 40px;
          padding: 0 20px 0 10px;
          border-bottom: solid 1px #f2f2f2;

          &.tip {
            text-align: center;
            display: block;
            font-size: 12px;
            color: #999999;
          }

          .icon {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            &:hover {
              cursor: pointer;
            }
          }
        }
      }
    }

    .right {
      width: 49%;

      .title {
        line-height: 32px;
        font-weight: bold;
        background-color: #f2f2f2;
        padding: 0 20px;
      }

      .list {
        padding: 0;
        margin: 0;
        list-style-type: none;

        li {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          line-height: 40px;
          padding: 0 20px 0 10px;
          border-bottom: solid 1px #f2f2f2;

          &.tip {
            text-align: center;
            display: block;
            font-size: 12px;
            color: #999999;
          }

          .icons {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            .icon {
              margin-left: 10px;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;

              &:hover {
                cursor: pointer;
              }
            }

            img {
              width: 15px;
              height: 15px;
            }
          }
        }
      }
    }
  }

  .page {
    float: right;
  }
}
</style>